<template>
  <div class="headerMain">
    <bcb_220>
      <div class="headerConstants">
        <div class="headerLeft">
          <p>{{ i18nt.header.str1 }}</p>
        </div>
        <div class="headerRight">
          <Avatar class="headerIcon1" />
          <btn_a :title="i18nt.header.str2" :style="{ marginRight: '25px' }" />
          <!-- <div class="headerIcon2">
            <QuestionFilled
              :sstyle="{
                width: '22px',
                height: '22px',
                color: '#A3A3A3',
                transform: 'scale(1.2)',
              }"
            />
          </div> -->
          <QuestionFilled class="headerIcon2" />
          <btn_a
            :title="i18nt.buttons.login"
            :style="{ marginRight: '25px' }"
          />
          <btn_a :title="i18nt.buttons.register" />
        </div>
      </div>
    </bcb_220>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import btn_a from "@/components/buttons/btn_a.vue";
import { Avatar, QuestionFilled } from "@element-plus/icons-vue";
</script>

<style scoped lang="scss">
.headerMain {
  @include relative_hw(100%, 100%);
  background: #f5f5f5;
}
.headerConstants {
  @include relative_hw;
  flex-direction: row;
  align-items: center;
  .headerLeft {
    position: relative;
    p {
      color: #a3a3a3;
      font-size: 18px;
    }
  }
  .headerRight {
    margin-left: auto;
    @include relative_hw(25px, auto);
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .headerIcon1,
  .headerIcon2 {
    @include rel_cen_hw(22px, 22px);
    transition: transform 0.2s ease;
    &:hover {
      cursor: pointer;
    }
    &:active {
      transform: scale(0.95);
    }
  }

  .headerIcon1 {
    margin-right: 1px;
    color: #a3a3a3;
  }
  .headerIcon2 {
    margin-right: 25px;
    color: #a3a3a3;
  }
}
</style>
